
/* CSS Document */
*{
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
	color:#FFF;}

.top{
	width:100%;
	height:92px;
	border:1px #666666 solid;
	background-color:#39F;
	box-sizing:border-box;
	
	}

.top img{
	background-color:#0C3;
	margin-left:65px;
	/*height:46px;
	width:170px;*/
    margin-top:23px;
	position:absolute;
	}
.top .top-loge{
	list-style:none;
	display:inline-block;
	margin-left:244px;
	}
.top-loge li{
	
	float:left;
	height:92px;
	width:95px;
	line-height:92px;
	text-align:center;
	}
.top-loge li a:hover{
	color:#0C3;
	}

.top-loge li:first-child{
	background-color:#0C3;
	}
.top form{
	
	width:223px;
	height:42px;
	background-color:#303;
	display:inline-block;
	position:absolute;
	margin-top:22px;
	border-radius:5px;
	overflow:hidden;
	}
.top form input{
	width:180px;
	height:42px;
	border:none;
	display:inline-block;
	
	}

.top .search {
	position:absolute;
	right:0px;
	display:inline-block;
	width:22px;
	height:22px;
	background:url("source/icon_sprite.png") no-repert 0px -259px;
	
	}
.top .logein{
	display:inline-block;
	position:absolute;
	top:33px;
	right:350px;
	}
	.top a:hover{
	color:#0C3;
	}
.top .open1{
	display:inline-block;
	width:113px;
	height:39px;
	position:absolute;
	background-color:#063;
	float:right;
	text-align:center;
	line-height:39px;
	top:26px;
	right:200px;
	border:1px solid #999;
	border-radius:5px;
	}
.top .open2{
	display:inline-block;
	width:100px;
	height:39px;
	position:absolute;
	background-color:#963;
	float:right;
	text-align:center;
	line-height:39px;
	right:70px;
	top:26px;
	border:1px solid #999;
	border-radius:5px;

	}

.nav{
	width:100%;
	height:46px;
	background-color:#063;}
.nav .navInfo{
	height:46px;
	width:1225px;
	margin:auto;
	background-color:#CF9;
	
	
	}
.nav .navInfo ul{
	
	list-style:none;
	width:600px;
	height:46px;
	margin:auto;
	
	}	
.navInfo  ul li:first-child a{
	color:#0c3;
	}
.nav .navInfo ul li{
	line-height:46px;
	float:left;
	margin-left:30px;
	}	
.navInfo ul li a:hover{
	color:#0c3;
	
	}	
	
	
	
	
.reconmened{
	width:100%;
	height:500px;
	background-color:#963;
	}
.reconmened .reconmenedInfo{
	width:1225px;
	height:500px;
	background-color:#903;
	margin:auto;
	position:relative;
	}
.reconmenedInfo h1{
	position:absolute;
	letter-spacing:20px;
	top:50px;
	left:50%;
	margin-left:-70px;
	
	}
.reconmenedInfo >ul {
	position:absolute;
	top:120px;
	list-style:none;
	left:50%;
	margin-left:-250px;
}
.reconmenedInfo> ul li{
	margin-left:30px;
	float:left;
	}

.cur{
	color:#0c3;
	}
.reconmenedInfo >ul li a:hover{
	color:#0c3;
}
.reconmenedInfo .show{
	position:absolute;
	width:1225px;
	height:320px;
	background-color:#FF3;
	top:160px;
	display:none;
	
	}
.reconmenedInfo>.chose{
	display:block;
	}
.reconmenedInfo .show> ul{

	list-style:none;}
.reconmenedInfo .show >ul> li{
	
	width:227px;
	height:294px;
	background-color:#993;
	float:left;
	margin-left:15px;
	margin-top:5px;
	}	
	.show .show-box{
		position:relative;}
	.show .show-box .box{
		width:227px;
	    height:227px;
	    overflow:hidden;
	
		}	
.show .show-box .box> img{
	width:300px;
	height:227px;
	transition: transform 0.5s;
	
	

	}
 .show-box .box img:hover{
	 transform:scale(1.1);
	
		
		}
	
.show-box span{
	
	display:block;
	margin-top:8px;
	
	font-size:13px;} 
.show-box span:last-child{
	font-size:10px;
	color:#666;
	}
.show-box i >img{
	width:60px;
	height:60px;
	position:absolute;
	top:50%;
	margin-top:-30px;
	margin-left:-30px;
	left:50%;
	display:none;
	}


.newSong{
	width:100%;
	height:500px;
	background-color:#0CF;
	}
.newSong .newSongInfo{
	width:1225px;
	height:500px;
	background-color:#903;
	margin:auto;
	position:relative;
	}
.newSongInfo h1{
	position:absolute;
	letter-spacing:20px;
	top:50px;
	left:50%;
	margin-left:-70px;
	}
.newSongInfo >ul {
	position:absolute;
	top:120px;
	list-style:none;
	left:50%;
	margin-left:-150px;
}
.newSongInfo> ul li{
	margin-left:30px;
	float:left;
	cursor:pointer;
	color:#FFF;
	}
.newSongInfo> ul li:hover{
	color:#0c3;
	}
.newSongInfo .newBox .cur1{
	color:#0c3;
	}
.newSongInfo .songBox{
	
	width:150px;
	height:40px;
	background-color:#036;
	display:inline-block;
	position:absolute;
	top:100px;
	left:0px;
	opacity:0.7;
	border:1px solid #999;
	box-sizing:border-box;
	}	
.newSongInfo .songBox i{
	display:inline-block;
	width:15px;
	height:15.5px;
	background-color:#F00;
	margin-left:20%;
	background:url(source/icon_sprite.png) no-repeat -59px -220px;
	/*margin-top:8px;*/
	}
.newSongInfo .songBox span{
	display:inline-block;
	margin-left:4px;
	color:#FFF;
	margin-top:7px;
	}
.songBox:hover{
	opacity:1;}
.newSongInfo .newSongMsg {
	position:absolute;
	width:100%;
	height:320px;
	background-color:#996;
    top:180px;
	
	}
.newSongMsg .select{
	display:block;
	}
.newSongMsg >div{
	display:none;
	}

.newSongMsg ul{
	list-style:none;}
.newSongMsg ul li{
	width:402px;
	height:100px;
	background-color:#9F0;
	margin-top:5px;
	margin-left:5px;
	float:left;
	
	color:#FFF;
	
	}
.newSongMsg .songMeg{
	position:relative;}
.songMeg .song1 .cover{
	display:none;
	z-index:2;
	}

  .songMeg .song1 .cover img{
	width:50px;
	height:50px;
	position:absolute;
	top:25px;
	left:25px;
	
	
	}	

.songMeg>div{
	width:100px;
	height:100px;
	display:inline-block;
	overflow:hidden;
	}
.songMeg div >img{
	width:100px;
	height:100px;
	}

.songMeg >span{
     display:inline-block;
	position:absolute;
	top:0px;
	left:0px;
	
	}
.songMeg .songName{
	top:30px;
	left:120px;
	}
.songMeg .singerName{
	top:60px;
	left:120px;
	color:#666;
	}
.songName:hover{
	color:#0c3;
	}
.singerName:hover{
	color:#0c3;
	}
.songMeg i{
	display:inline-block;
	
	float:right;
	margin-right:15px;
	line-height:100px;
	color:#999;
	}
.wonSong{
	width:100%;
	height:420px;
	background-color:#969;
	position:relative;
	}
.wonSongInfo{
	width:1225px;
	height:420px;
	background-color:#339;
	overflow:hidden;
	margin:auto;
	position:relative;}
.wonSongInfo h1{
	letter-spacing:10px;
    margin:60px auto 30px auto;
	text-align:center;
	}
.wonSongInfo>ul{
	width:3775px;
	height:240px;
	list-style:none;
	position:relative;
	/*animation:move 50s infinite;*/
	}
/*@keyframes move
{
from {left:0px;}
to {left:-2500px;}
}*/
.wonSongInfo >ul> li{
	width:600px;
	height:240px;
	float:left;
	margin:6.2px;
	background-color:#9F3;}
.wonSongInfo ul li img{
	width:600px;
	height:240px;
	}
.wonSong .listyle .last{
	position:absolute;
	width:19px;
	height:36px;
	background:url(source/icon_sprite.png) no-repeat -19px -121px;
	top:200px;
	left:30px;
	background-color:#996;
	}
.wonSong .listyle .next{
	position:absolute;
	width:19px;
	height:36px;
	background:url(source/icon_sprite.png) no-repeat 0px -121px;
	background-color:#996;
	top:200px;
	right:30px;
	}
.bar{
	position:absolute;
	top:95%;
	left:50%;
	margin-left:-30px;
	}
.bar>ul>li{
	list-style:none;
	width:10px;
	height:10px;
	border-radius:20px;
	background-color:#CCC;
	float:left;
	margin-left:10px;
	
	}
.bar>ul>.liset{
	
	background-color:#0C3;}
.wonSong .listyle{
	display:none;}
	


.newCd{
	width:100%;
	height:770px;
	background-color:#0CF;
	}
.newCd .newCdInfo{
	width:1225px;
	height:770px;
	background-color:#903;
	margin:auto;
	position:relative;
	}
.newCdInfo h1{
	position:absolute;
	letter-spacing:20px;
	top:50px;
	left:50%;
	margin-left:-70px;
	}
.newCdInfo >ul {
	position:absolute;
	top:120px;
	list-style:none;
	left:50%;
	margin-left:-150px;
}
.newCdInfo .cdBox span{
	display:inline-block;
	top:120px;
	right:0px;
	position:absolute;
	color:#FFF;
	margin-top:7px;
	}
	.newCdBox >.cur1{
		color:#0F3;
		}
.newCdInfo> ul li{
	margin-left:30px;
	float:left;
	cursor:pointer;
	color:#FFF;
	}
.newCdInfo> ul li:hover{
	color:#0c3;
	}
,newCdInfo .newCdMsg{
	
	}
.newCdMsg ul{
	list-style:none;
	position:absolute;
	top:160px;}
.newCdMsg ul li{
	width:230px;
	height:296px;
	background-color:#0C9;
	float:left;
	margin:auto;
	margin-left:12px;
	margin-bottom:5px;
	}
.cdMeg .cd1{
	width:230px;
	height:230px;
	overflow:hidden;
	position:relative;
	}
.cd1 .cover{
	display:none;}
.cd1 .cover img{
	width:60px;
	height:60px;
	position:absolute;
	top:80px;
	left:90px;
    
	
	}
.cdMeg .cd1>img{
	width:230px;
	height:230px;
	}
 
.cdMeg span{
	display:inline-block;
	margin-top:6px;
	color:#2A2A2A;}
.cdMeg i{
	color:#8D8D8D;}
	
.rankingList{
	width:100%;
	height:650px;
	background-color:#0CF;
	}
.rankingList .rankingListInfo{
	width:1225px;
	height:650px;
	background-color:#9C3;
	margin:auto;
	position:relative;
	}
.rankingListInfo > span{
	display:inline-block;
	top:70px;
	right:0px;
	position:absolute;
	color:#FFF;
	margin-top:7px;
	}
.rankingListInfo> h1{
	position:absolute;
	letter-spacing:20px;
	top:50px;
	left:50%;
	margin-left:-70px;
	}
.rankingListInfo >ul {
	position:absolute;
	top:120px;
	list-style:none;	
}
.rankingListInfo >ul>li{
	width:224px;
	height:500px;
	background:url(source/bg_index_top.jpg) no-repeat 0px 0px;
	margin-left:17px;
	float:left;
	}
.rankingListInfo >ul>li:hover{
	transform:scale(1.1);
	
	}
.rankingListInfo >ul>li:nth-child(2){
	background-position:-224px 0px;
	}
.rankingListInfo >ul>li:nth-child(3){
	background-position:-448px 0px;
	}
.rankingListInfo >ul>li:nth-child(4){
	background-position:-672px 0px;
	}
.rankingListInfo >ul>li:nth-child(5){
	background-position:-896px 0px;
	}
.rangkBox{
	position:relative;
	width:224px;
	height:500px;
	}
.rankBox> h3{
  /*  margin-left:80px;*/
	margin-top:30px;
	color:#FFF;
	text-align:center;
	}
.rankBox>h1{
	
	/*margin-left:40px;*/
	margin-top:10px;
	color:#FFF;
	text-align:center;
	}
.rankBox>span{
	margin-top:10px;
	display:inline-block;
	width:60px;
	height:60px;
	margin-left:78px;
	display:none;}
.rankBox>span>img{

	width:60px;
	height:60px;}	
.rankBox>ul{
	list-style:none;
	margin-top:25px;
	margin-left:35px;
	}
.rankBox>ul>li>span{
	margin-right:8px;
	color:#FFF;
	margin-top:10px;}
.rankBox>ul>li{
	
	margin-top:20px;
	}
.rankBox>ul>li>i{
   margin-left:10px;
   color:#FFF;
}






.mv{
	width:100%;
	height:800px;
	background-color:#963;
	
	}
.mv .mvInfo{
	width:1225px;
	height:800px;
	background-color:#903;
	margin:auto;
	position:relative;
	}
.mvInfo h1{
	position:absolute;
	letter-spacing:20px;
	top:50px;
	left:50%;
	margin-left:-50px;
	text-align:center;
	
	
	}
.mvInfo >ul {
	position:absolute;
	top:120px;
	list-style:none;
	left:50%;
	margin-left:-220px;
	text-align:center;
	
}
.mvInfo> ul li{
	margin-left:30px;
	float:left;
	}

.cur{
	color:#0c3;
	}
.mvInfo >ul li a:hover{
	color:#0c3;
}
.mvInfo .mvshow{
	position:absolute;
	width:1225px;
	height:320px;
	top:160px;
	display:none;
	
	}
.mvInfo>.chose{
	display:block;
	}
.mvInfo .mvshow> ul{
   
	list-style:none;}
.mvInfo .mvshow >ul> li{
	
	width:227px;
	height:294px;
	background-color:#993;
	float:left;
	margin-left:15px;
	margin-top:5px;
	}	
	.mvshow .mvshow-box{
		position:relative;}
	.mvshow .mvshow-box .mvbox{
		width:227px;
	    height:227px;
	    overflow:hidden;
		
	
		}	
.mvshow .mvshow-box .mvbox> img{
	width:300px;
	height:227px;
	/*transition: transform 0.5s;*/
	}
/* .mvshow-box .mvbox img:hover{
	 transform:scale(1.1);
	
		}
	*/
.mvshow-box span{
	
	display:block;
	margin-top:8px;
	
	font-size:13px;} 
.mvshow-box span:last-child{
	font-size:10px;
	color:#666;
	}
.mvbox .cover1{
	display:none;
	}
.mvbox>i>img{
	width:60px;
	height:60px;
	position:absolute;
	top:60px;
	left:80px;
	
	
	}
.mvshow-box>span> i{
	display:inline-block;
	width:19px;
	height:12px;
	background:url(source/icon_sprite.png) no-repeat -180px -20px;
}
.footer>img{
	width:100%;
	height:415px;
	}